<!-- templates/teacher_dashboard.html -->
{% extends "base.html" %}
{% block title %}教师仪表盘{% endblock %}

{% block extra_css %}
<style>
    /* 修复卡片悬停效果 */
    .col-md-4 .card {
        background: rgb(220, 220, 220)!important;
        border-radius: 24px;
        overflow: hidden; /* 确保内部内容圆角匹配 */
    }

    /* 学生列表主卡片圆角 */
    .col-md-8 .card {
        background: rgb(220, 220, 220)!important;
        border-radius: 24px;
        overflow: hidden;
    }

    .rating-form {
    border-left: 3px solid #4ECDC4;
    padding-left: 1.5rem;
    background: rgba(255,255,255,0.98);
    z-index: 1;
    }

    .code-preview {
    font-size: 0.9rem;
    line-height: 1.5;
    }

    .form-control-lg {
        padding: 0.8rem 1rem;
    }

    .position-sticky {
        align-self: flex-start;
    }
    .student-card {
        background: rgba(238, 238, 238, 0.95);
        border-radius: 15px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        transition: transform 0.3s;
        margin-bottom: 1.5rem;
        padding: 1.5rem;
    }
    
    /* 修复评分表单布局 */
    .rating-form {
        border-left: 3px solid #4ECDC4;
        padding-left: 1.5rem;
        margin-top: 1rem;
    }
    
    /* 修复模态框代码预览 */
    .code-preview {
        max-height: 400px;
        overflow-y: auto;
        background: #f8f9fa;
        padding: 1rem;
        border-radius: 8px;
    }
</style>
{% endblock %}

{% block content %}
<div class="row">
    <!-- 班级信息卡片 -->
    <div class="col-md-4">
        <div class="card shadow mb-4">
            <div class="card-body">
                <h4 class="mb-4"><i class="fas fa-chalkboard-teacher me-2"></i>班级信息</h4>
                <div class="class-info">
                    <p><i class="fas fa-users me-2"></i>班级名称：{{ current_user.class_id }}</p>
                    <p><i class="fas fa-user-graduate me-2"></i>学生人数：<span id="studentCount">0</span></p>
                </div>
            </div>
            <div class="card-body">
                <h4 class="mb-4"><i class="fas fa-tasks me-2"></i>任务管理</h4>
                <div id="taskList">
                    <!-- 动态加载任务 -->
                </div>
                <a href="/create_task" class="btn btn-success w-100 mt-3">
                    <i class="fas fa-plus me-2"></i>布置新任务
                </a>
            </div>
        </div>
    </div>

    <!-- 学生列表 -->
    <div class="col-md-8">
        <div class="card shadow">
            <div class="card-body">
                <h4 class="mb-4"><i class="fas fa-users me-2"></i>学生列表</h4>
                <div id="studentList" class="row g-3">
                    <!-- 动态加载 -->
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// 修复API请求URL
async function loadStudents() {
    try {
        const response = await fetch(`/api/students?class_id=${encodeURIComponent("{{ current_user.class_id }}")}`);
        const students = await response.json();
        
        document.getElementById('studentCount').textContent = students.length;
        const container = document.getElementById('studentList');
        
        container.innerHTML = students.map(student => `
            <div class="col-md-6">
                <div class="student-card">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h5 class="mb-0">${student.username}</h5>
                        <span class="badge bg-primary">${student.class_id}</span>
                    </div>
                    <div class="submission-info">
                        <p class="mb-1"><i class="fas fa-clock me-2"></i>最近提交：${student.last_submission || '无记录'}</p>
                        <p class="mb-3"><i class="fas fa-star me-2"></i>平均分：${student.avg_score?.toFixed(1) || '0.0'}/10</p>
                    </div>
                    <button class="btn btn-sm btn-outline-primary w-100" 
                            onclick="viewStudentDetail(${student.id})">
                        <i class="fas fa-file-code me-1"></i>查看详情
                    </button>
                </div>
            </div>
        `).join('');
    } catch (error) {
        alert('加载学生列表失败');
    }
}

async function loadTasks() {
    try {
        const response = await fetch('/api/tasks');
        const tasks = await response.json();
        
        const container = document.getElementById('taskList');
        container.innerHTML = tasks.map(task => `
            <div class="card mb-3">
                <div class="card-body">
                    <h6 class="card-title">${task.title}</h6>
                    <p class="text-muted small mb-2">
                        截止时间：${task.deadline}
                    </p>
                    <p class="card-text">${task.content.substring(0, 50)}...</p>
                </div>
            </div>
        `).join('');
    } catch (error) {
        console.error('加载任务失败:', error);
    }
}

// 在DOM加载时调用
document.addEventListener('DOMContentLoaded', () => {
    loadStudents();
    loadTasks();
});

// 修复模态框内容
async function viewStudentDetail(studentId) {
    try {
        const response = await fetch(`/api/student/${studentId}`);
        const data = await response.json();
        
        const modalHtml = `
            <div class="modal fade" id="studentModal">
                <div class="modal-dialog modal-xl">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">${data.username}的提交记录</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body" style="max-height: 70vh; overflow-y: auto;">
                            <div class="row">
                                <div class="col-md-7">
                                    ${data.history.map(item => `
                                        <div class="card mb-3">
                                            <div class="card-body">
                                                <div class="d-flex justify-content-between align-items-start">
                                                    <div>
                                                        <div class="d-flex align-items-center mb-2">
                                                            <span class="badge bg-primary me-2">
                                                                ${new Date(item.timestamp).toLocaleDateString()}
                                                            </span>
                                                            <span class="badge bg-success">
                                                                评分：${item.score}/10
                                                            </span>
                                                        </div>
                                                        <pre class="code-preview">${item.code_content.substring(0, 100)}...</pre>
                                                    </div>
                                                    <button class="btn btn-link p-0" 
                                                            onclick="showFullCode('${item.id}')">
                                                        <i class="fas fa-expand"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    `).join('')}
                                </div>
                                <div class="col-md-5 rating-form position-sticky top-0">
                                    <h5><i class="fas fa-edit me-2"></i>教师评分</h5>
                                    <form onsubmit="submitRating(event, ${studentId})">
                                        <div class="mb-3">
                                            <label>评分（1-10）</label>
                                            <input type="number" min="1" max="10" 
                                                   class="form-control" 
                                                   value="${data.rating?.rating || ''}"
                                                   required>
                                        </div>
                                        <div class="mb-3">
                                            <label>评语</label>
                                            <textarea class="form-control" 
                                                      rows="8"
                                                      style="min-height: 200px; font-size: 1.1rem;"
                                                      placeholder="输入详细评语...">${data.rating?.comment || ''}</textarea>
                                        </div>
                                        <button type="submit" class="btn btn-primary w-100">
                                            <i class="fas fa-save me-2"></i>保存评分
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        `;
        
        const modalContainer = document.createElement('div');
        modalContainer.innerHTML = modalHtml;
        document.body.appendChild(modalContainer);
        
        new bootstrap.Modal(document.getElementById('studentModal')).show();
    } catch (error) {
        alert('加载详情失败');
    }
}

document.addEventListener('DOMContentLoaded', loadStudents);
</script>
{% endblock %}